<template>
  <div class="tabs-main">
    <a-tabs v-model="tabValue" :tabBarStyle="{ backgroundColor: '#fff',marginBottom: '6px',padding: '0px 8px' }" v-if="tabsItems && tabsItems.length>0">
      <a-tab-pane v-for="item in tabsItems" :tab="item.title" :key="item.key" />
    </a-tabs>
    <component class="component-action" ref="refComponent" :tabValue="tabValue" :is="allComps[getComponents()]" />
  </div>
</template>

<script>
import allComps, { components } from './modules/index';
export default {
  data() {
    return {
      allComps: allComps,
      components: components,
      tabValue: 1
    }
  },
  computed: {
    tabsItems() {
      let datas = this.components.map(item=>{
        return {
          key: item.type,
          title: item.title
        }
      })
      return datas
    }
  },
  beforeRouteEnter:(to,from,next) => {
    next(vm => {
      if(Object.keys(from.query).length>0 && from.query.tab) {
        vm.tabValue = Number(from.query.tab)
      }
    })
  },
  methods: {
    getComponents() {
      let item = this.components.find(obj=> {return obj.type == this.tabValue})
      return item['componentsName']
    }
  }
}
</script>
